<style rel="stylesheet/scss" lang="scss" scoped>

  .trainUnsb {
    height: 100%;
    background-color: #f0f0f0;
    padding: 2.2rem 0 2.5rem 0;
    box-sizing: border-box;
    overflow: auto;
    .butActivs {
      background-color: #0994db;
      color: #fff;
    }
  }

  .okrefund {
    height: 2.5rem;
    width: 100%;
    line-height: 2.5rem;
    text-align: center;
    background-color: #666666;
    color: #ffffff;
    position: fixed;
    left: 0;
    bottom: 0;
    font-size: .8rem;
  }

  .train-list {
    margin: .25rem;
    background-color: #ffffff;
    -webkit-border-radius: .125rem;
    -moz-border-radius: .125rem;
    border-radius: .125rem;
  }

  .train-list .itme {
    display: flex;
  }

  .train-list .itme div {
    flex: 1;
    font-size: .7rem;
    height: 2rem;
    line-height: 2rem;
    padding: 0px .5rem;
  }

  .train-list .models {
    text-align: center;
  }

  .train-list .listicon {
    width: 1.45rem;
    height: 1.45rem;
    border: 1px solid #999999;
    float: right;
    margin-top: .25rem;
    text-align: center;
    line-height: 1.5rem;
    border-radius: .05rem;
  }

  .icon-duihao {
    font-size: 1rem;
    color: #0994db;
  }

  .contact-information {
    margin: .25rem;
    background-color: #ffffff;
    -webkit-border-radius: .125rem;
    -moz-border-radius: .125rem;
    border-radius: .125rem;
    display: flex;
    font-size: .75rem;
    color: #999999;
    padding: .25rem .5rem;
    .contact {
      flex: 0 3.5rem;
      line-height: 2rem;
    }
    .name {
      flex: 0 3.5rem;
      line-height: 2rem;
    }
    .information {
      flex: 1;
      line-height: 1.25rem;
      margin-top: .375rem;
    }
  }

  .changePop {
    width: 92%;
    margin: 0 auto 5rem;
    height: 20rem;
    overflow: scroll;
    .changeTitle {
      height: 2.5rem;
      line-height: 2.5rem;
      text-align: center;
      color: #333333;
      font-size: .8rem;
      border-bottom: 1px solid #bbbbbb;
    }
    .changeItem {
      p {
        padding: .5rem .75rem 0 .75rem;
        color: #333333;
        font-size: .7rem;
        line-height: 1.5;
      }
    }
  }

  .refundChange {
    /*width: 80%;*/
    margin-top: 1.25rem;
    font-size: .8rem;
    p {
      margin-bottom: 1rem;
      font-size: .8rem;
    }
  }

  .refund-but {
    display: flex;
    border-top: 1px solid #999999;
    line-height: 2rem;
    color: #0094db;
    .refund-cancel {
      flex: 1;
      text-align: center;
      border-right: 1px solid #999999;
    }
    .refund-success {
      flex: 1;
      text-align: center;
    }
  }
</style>

<template>
  <div class="trainUnsb">
    <head-nav centerTitle="火车退票" rightTitle="退票规则" @rightClick="clickShows" @headBack="headBack"></head-nav>
    <div class="train-list">
      <ul v-if="passengerList.length>0">
        <li class="itme" v-for="(itme,index) in passengerList">
          <div>{{itme.name}}</div>
          <div class="models">{{itme.statetext}}</div>
          <div>
            <p v-if="itme.statetext=='已出票'" @click="showIcon(itme)" class="listicon">
              <i v-show="itme.isshow" class="icon iconfont icon-duihao"></i>
            </p>
          </div>
        </li>
      </ul>
    </div>
    <!--联系人信息contact information-->
    <div class="contact-information">
      <div class="contact">联系人</div>
      <div class="name">{{refundContact.name}}</div>
      <div class="information">
        <p>{{refundContact.mobile}}</p>
        <p>{{refundContact.email}}</p>
      </div>
    </div>
    <div class="okrefund" :class="{butActivs:isButActivs}" @click="submitRefund">
      确认退票
    </div>
    <!--退改签规则弹窗-->
    <mt-popup v-model="changeShow" position="bottom" class="changePop">
      <div class="changeTitle">
        退改签规则
      </div>
      <div class="changeItem">
        <p>1、购票成功后，未取票且发车前时间大于35分钟，可通过商旅助手系统在线申请退票；</p>
        <p>2、开车前15天(不含)以上，不收取退票费；</p>
        <p>3、开车前48小时以上的，退票手续费5%；</p>
        <p>4、开车前25-48小时之间，退票手续费10%；</p>
        <p>5、开车前24小时之内，退票手续费20%；</p>
        <p>6、最终退款以铁路局实退为准，退票手续费最低收取2元；</p>
        <p>7、购票成功后，已取票或发车前时间小于35分钟，需您自行携带购票时所使用的乘车人有效证件原件和火车票在发车前去火车站退票窗口办理退票；</p>
      </div>
    </mt-popup>
    <!--确认是否退票-->
    <alert v-show="alertRefund">
      <div class="refundChange">
        <div class="">
          <p>您确定要退订这{{passengerIds.length}}个班次</p>
        </div>
        <div class="refund-but">
          <div class="refund-cancel" @click="hideAlert">取消</div>
          <div class="refund-success" @click="successA">确定</div>
        </div>
      </div>
    </alert>
    <!--成功和失败弹窗-->
    <alert v-show="successActive">
      <div class="refundChange">
        <div class="">
          <p>{{successText}}</p>
        </div>
        <div class="refund-but">
          <div class="refund-success" @click="Allretour">确定</div>
        </div>
      </div>
    </alert>
  </div>
</template>

<script>
  import {Popup, Indicator, Toast} from 'mint-ui';
  import alert from '../../components/alert.vue';
  import train from '@/data/train.js';
  export default{
    data(){
      return {
        changeShow: false,
        iconShow: false,
        refundContact: "",
        passengerIds: [],
        alertRefund: false,
        successText: "",
        successActive: false
      }
    },
    mounted(){
      //this.passengerList = this.$store.state.trainRefund.passengerList;//存在store.state的数据
      this.refundContact = this.$store.state.trainRefund.refundContact;
    },
    methods: {
      headBack(){
        this.$router.go(-1);
      },
      clickShows(){
        this.changeShow = true;
      },
      //选择退票的id
      showIcon(item){
        item.isshow = !item.isshow;
        if (item.isshow === true) {
          if (this.passengerIds.indexOf(item.id) == -1 || this.passengerIds.length === 0) {
            this.passengerIds.push(item.id);
          } else {
            return
          }
        }
        if (item.isshow === false) {
          if (this.passengerIds.indexOf(item.id) !== -1 || this.passengerIds.length !== 0) {
            let index = this.passengerIds.indexOf(item.id);
            this.passengerIds.splice(index, 1);
          }
        }
      },
      //提交退票
      submitRefund(){
//        let _this = this;
//        if(this.isButActivs===true){
//          _this.alertRefund=true;
//        }
        var that = this;
        that.$vux.confirm.show({
          content: '您确定要退订这' + that.passengerIds.length + '个班次吗?',
          onCancel() {
          },
          onConfirm() {
            that.successA();
          }
        })
      },
      //取消按钮
      hideAlert(){
        let _this = this;
        _this.alertRefund = false;
      },
      successA(){
        let _this = this;
        var orderId = this.$route.query.orderId;
        var refundTrainForm = {
          orderId: orderId,
          contactName: _this.refundContact.name,
          contactPhone: _this.refundContact.mobile,
          contactEmail: _this.refundContact.email,
          refundCount: _this.passengerIds.length,
          passengerIds: _this.passengerIds
        };
        Indicator.open({
          text: '加载中...',
          spinnerType: 'fading-circle'
        })
        train.refundOrder(refundTrainForm, function (data) {
          Indicator.close();
          if (data !== "") {
            _this.$vux.toast.show({
              type: 'success',
              text: '班次退订成功',
              time: 1000
            })
            setTimeout(function () {
              _this.$router.push('/');
            }, 1000)
          } else {
            _this.$vux.toast.show({
              type: 'cancel',
              text: '班次退订失败',
              time: 1000
            })
          }
        },function () {
          Indicator.close();
          _this.$vux.toast.show({
            type: 'warn',
            text: '服务器出错,请稍后在试',
            time: 1000
          })
        });
      },
      Allretour(){
        $jump.home(this);
      }
    },
    computed: {
      whethershow: function () {
        for (let i = 0; i < this.passengerList.length; i++) {

        }
      },
      isButActivs: function () {
        let le = this.passengerIds.length;
        if (le < 1) {
          return false
        } else {
          return true
        }
      },
      passengerList(){
        let list = this.$store.state.trainRefund.passengerList;
        for (let i = 0; i < list.length; i++) {
          list[i].isshow = false
          if (list[i].refundOrderId == "") {
            list[i].statetext = '已出票';
          } else if (list[i].refundType === "REFUNDING") {
            list[i].statetext = '退票中';
          } else if (list[i].refundType === "REFUNDED") {
            list[i].statetext = '已退票';
          }
        }
        return list
      }
    },
    components: {
      alert
    },
  }
</script>
